import React,{Component} from 'react'

import {
     StyleSheet,
  View,
  Text,
  Image,
   FlatList,
   TouchableOpacity,
  Dimensions,
  TouchableHighlight,
}from 'react-native'


import Change from './change'

const { width, height } = Dimensions.get('window');

const leftwidth=width/14
const rightwidth=width*13/14
const imgwidth=width*4/25
const rightwidth1=width*16/25



var styles=StyleSheet.create({
    shopcartwarp:{
      position:'absolute',
      width:width,
      height:'100%',
      
    },
    shopcart:{
      position:'absolute',
      width:rightwidth,
      height:48,
      left:leftwidth/2,
      bottom:0,
      backgroundColor:'#3a3635',
      borderRadius:20,
      flexDirection:'row',
      justifyContent:'space-around',
      alignItems:'center'
    },
    shopleftwarp:{
      width:48,
      paddingLeft:5,
      paddingTop:5,
      height:48,
    },
    shopleftimg:{
      width:35,
      height:35,
    },
    shoplefttext:{
      position:'absolute',
      borderRadius:10,
      padding:2,
      fontSize:10,
      height:15,
      textAlign:'center',
      color:'white',
      backgroundColor:'#ff2d4b',
      lineHeight:13,
      borderWidth:2,
      borderColor:'white',
      right:-1,
      top:-1
    },
    shopmiddlewarp:{
      width:(rightwidth-50)/2,
      height:50,
      padding:4
    },
    shopmiddletext1:{
      width:'100%',
      color:'white',
      height:"50%",
      fontSize:12,
      lineHeight:15,
      textAlign:'left',
      paddingLeft:15
    },
    shopmiddletext2:{
      width:'100%',
      color:'#808080',
      height:"50%",
      fontSize:10,
      lineHeight:11,
      textAlign:'left',
      paddingLeft:15
    },
    shoprightwarp:{
      width:(rightwidth-50)/2,
      height:50,
      padding:4,
      borderTopRightRadius:20,
      borderBottomRightRadius:20,
      backgroundColor:'#ff2d4b'
    },
    shoprighttext:{
      textAlign:'center',
      lineHeight:29,
      color:'white'
    },
    listwarp:{
      width:'100%',
      height:'100%',
      backgroundColor:'rgba(172,171,171,0.8)'
    },
    shoplist:{
      position:'absolute',
      width:rightwidth,
      maxHeight:350,
      left:leftwidth/2,
      bottom:58,
      borderRadius:25,
    },
    shoplistimg:{
      width:'100%',
      height:19,
    },
    shoplisttop:{
      width:'100%',
      flexDirection:'row',
      justifyContent:'space-around',
      alignItems:"center",
      height:50,
      padding:10,
      backgroundColor:'white',
      borderBottomWidth:1,
      borderColor:'rgba(230,230,230,0.8)'
    },
    shoplistleft:{
      width:rightwidth/2,
      height:30,
      textAlign:'left',
      paddingLeft:15,
      lineHeight:25
    },
    shoplistright:{
      width:rightwidth/2,
      height:30,
      flexDirection:'row',
      justifyContent:'center',
      alignItems:"center",
    },
    topinimg:{
      width:20,
      height:20
    },
    topinrighttext:{
      color:'rgba(0,0,0,0.6)'
    },
    shoplistcontent:{
      backgroundColor:'white',
      maxHeight:280,
      width:'100%'
    },
    listinitem:{
      width:'100%',
      paddingTop:5,
      paddingBottom:5,
      flexDirection:'row',
      justifyContent:'space-around',
      alignItems:'center'
    },
    foodaddwarp:{
      width:'40%'
    },
    foodname:{
      width:'26%'
    },
    foodprice:{
      width:'20%',
      textAlign:'right'
    }
    })

export default class Shopcart extends Component{

    constructor(props) {
    super(props);
    
    }

    clearorder=()=>{
      this.props.totalPrice.shopList.forEach(function(data){
        data.num=0
      })
    }

    state={
      showlist:false
    }

    render(){
        return(
          <View style={styles.shopcartwarp} >
          {
            this.state.showlist
            ?
            <View style={{width:'100%',height:'100%'}}>
            <TouchableOpacity style={styles.listwarp} onPress={()=>{this.setState({showlist:false})}}>
            </TouchableOpacity>
            <View style={styles.shoplist} >

            <View style={styles.shoplisttop}>
            <Text style={styles.shoplistleft}>已选择</Text>
            <TouchableOpacity style={styles.shoplistright} onPress={()=>{this.clearorder()}}>
            <View style={styles.shoplistright}>
            <Image style={styles.topinimg} resizeMode='contain' source={require("../img/empty.png")}/>
            <Text style={styles.topinrighttext}>清空购物车</Text>
            </View>
            </TouchableOpacity>
            </View>

            

            <FlatList
              style={styles.shoplistcontent}
              numColumns={1}
              keyExtractor={(item, index) => index}
              data={this.props.chosed}
              showsVerticalScrollIndicator={false}
              ItemSeparatorComponent={()=>{
                                return(
                                <View style={{width:'100%',height:1,backgroundColor:'gray'}}>
                                </View>
                                )
                                }
                         }
              renderItem={(item)=>{
                return(
                  <View style={styles.listinitem}>
                  <View style={{borderRadius:5,width:5,height:5,backgroundColor:'red'}}/>
                  <Text style={styles.foodname}>{item.item.foodname}({item.item.listName})</Text>
                  
                 
                  
                  <Text style={styles.foodprice}>￥{parseFloat(item.item.price*item.item.num).toFixed(2)}</Text>
                  <Change makesure={()=>{this.props.changeid(item.item.index1,item.item.index2)}} style={styles.foodaddwarp} data={item.item} />
                  </View>
                )
              }}
              />

            <Image style={styles.shoplistimg} resizeMode='contain' source={require("../img/cartbottom.png")}/>

            </View>
            </View>
            :
            <Text style={{position:'absolute',bottom:58}}></Text>
            }

            <TouchableOpacity activeOpacity={1} style={{width:'100%',position:'absolute',bottom:10,height:48}} onPress={()=>{this.setState({showlist:!this.state.showlist})}}>
            <View style={styles.shopcart}>
            <View style={styles.shopleftwarp}>
            <Image source={require("../img/cart.png")} style={styles.shopleftimg}/>
            <Text style={styles.shoplefttext}>{this.props.totalPrice.totalCount}</Text>
            </View>
            <View style={styles.shopmiddlewarp}>
            <Text style={styles.shopmiddletext1}>总价：{this.props.totalPrice.totalPrice}</Text>
            <Text style={styles.shopmiddletext2}>桌号：未选择</Text>
            </View>
            <View style={styles.shoprightwarp}>
            <Text
            onPress={
              ()=>{
                if(this.props.totalPrice.totalPrice>0)
                this.props.navigation.navigate("ToPay",{food:this.props.chosed,totalPrice:this.props.totalPrice.totalPrice})
                else
                 alert('您还未选择任何菜品')
              }
            }
            style={styles.shoprighttext}>
            选好了
            </Text>
            </View>
            </View>
            </TouchableOpacity>

            </View>
        )
    }
}